import { buildProps, definePropType, isBoolean } from '@v-model/shared--utils'
import { type ExtractPropTypes } from 'vue'
import { vContentProps } from './v-content'

type DoneFn = (cancel?: boolean) => void
export type DialogBeforeCloseFn = (done: DoneFn) => void

export const windowProps = buildProps({
  ...vContentProps,
  /**
   * @description whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true`
   */
  appendToBody: Boolean,
  /**
   * 选择数据 key 值设置
   * @description visibility of Dialog
   */
  modelValue: {
    type: Boolean,
    default: false,
  },
  /**
   * 是否显示 遮罩层
   * @description whether a mask is displayed
   */
  modal: {
    type: [Boolean, String],
    default: true,
  },
  mainStyle: Object,
  title: {
    type: [String],
  },
  /**
   * @deprecated 弹框宽度, 宽度建议使用 width 属性
   */
  initWidth: {
    type: String,
    default: '',
  },
  /**
   * @deprecated 弹框高度, 高度建议使用 height 属性
   */
  initHeight: {
    type: String,
    default: '',
  },
  //初始高度
  minWidth: {
    type: String,
    default: '',
  },
  minHeight: {
    type: String,
    default: '',
  },
  initLeft: {
    type: String,
    default: '10vw',
  },
  //初始上边距
  closable: {
    type: [Boolean, String],
    default: true,
  },
  //能否缩放
  maxable: {
    type: [Boolean, String],
    default: true,
  }, //能否缩放
  defaultMax: {
    type: [Boolean, String],
    default: false,
  }, //默认最大化
  onclose: {
    type: Function,
    default: null,
  },
  onresize: {
    type: Function,
    default: null,
  },
  onfocus: {
    type: Function,
    default: null,
  },
  // 是否开启默认 确认取消按钮
  footer: {
    type: Boolean,
    default: false,
  },
  // loading 动画加载
  loading: {
    type: Boolean,
    default: false,
  },
  // 取消是否取消操作用户自定义
  isVerify: {
    type: Boolean,
    default: false,
  },

  /**
   * 选择数据 key 值设置
   */
  value: {
    type: String,
    default: 'value',
  },
  /**
   * 选择数据 展示的值设置
   */
  label: {
    type: String,
    default: 'label',
  },

  /**
   * 是否聚焦就自动查询后端  默认查询
   */
  focusQuery: {
    type: Boolean,
    default: true,
  },

  /**
   * @deprecated 返回数据的value ，  建议使用 `fields`
   */
  code: {
    type: String,
    default: '',
  },
  /**
   *  @description 请求后端 url 接口值
   */
  url: {
    type: String,
    default: '',
  },
  /**
   * @description 后端接口， 输入框输入字段后端接收对应的值
   */
  filterCode: {
    type: String,
    default: 'keyword',
  },
  /**
   * @description 默认 下拉展示表格宽度
   */
  width: {
    type: [Number, String],
    default: '30%',
  },
  /**
   * @description 下拉展示表格高度
   */
  height: {
    type: [Number, String],
    default: '',
  },

  data: {
    type: Array,
    default: () => [],
  },

  // 提示语
  placeholder: {
    type: String,
    default: '',
  },

  /**
   * @description 其他请求参数，除了filterCode 多余的接口请求参数
   * */
  requestArgs: {
    type: Object,
    default: () => {},
  },

  /**
   *  手段传入数据，数据源值
   * */
  options: {
    type: Object,
    default: () => [],
  },

  /**
   *  按钮右边图标
   */
  suffixIcon: {
    type: String,
    default: 'arrow-down',
  },
  /**
   * @description 表格动态列的数据源
   */
  columns: {
    type: Array,
    default: () => [],
  },

  /**
   * @deprecated 老版本 表格动态列的数据源
   */
  gridColumn: {
    type: Array,
    default: () => [],
  },
  /**
   * @description 是否显示分页
   */
  pagination: {
    type: [Boolean, String],
    default: false,
  },

  /**
   * @description 是否显示表格边框
   */
  border: {
    type: Boolean,
    default: true,
  },
  /**
   * @description 表格折叠行key
   */
  rowKey: {
    type: [String, Number],
    default: '',
  },

  /**
   * @description treeProps
   */
  treeProps: {
    type: Object,
    default: () => {},
  },

  /**
   * @description 当为树结构时，父的id
   */
  pid: {
    type: String,
  },

  /**
   * @description 默认情况，输入框选中数据点击 enter 时，自动关闭弹框， 是否用户自定义点击事件
   */
  userDbClick: {
    type: [Boolean, String],
  },

  /**
   * @description which element the Dialog appends to
   */
  appendTo: {
    type: definePropType<string>(String),
    default: 'body',
  },
  /**
   * @description callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog
   */
  beforeClose: {
    type: definePropType<DialogBeforeCloseFn>(Function),
  },
  /**
   * @description destroy elements in Dialog when closed
   */
  destroyOnClose: Boolean,
  /**
   * @description whether the Dialog can be closed by clicking the mask
   */
  closeOnClickModal: {
    type: Boolean,
    default: false,
  },
  /**
   * @description whether the Dialog can be closed by pressing ESC
   */
  closeOnPressEscape: {
    type: Boolean,
    default: true,
  },
  /**
   * @description whether scroll of body is disabled while Dialog is displayed
   */
  lockScroll: {
    type: Boolean,
    default: true,
  },

  /**
   * @description the Time(milliseconds) before open
   */
  openDelay: {
    type: Number,
    default: 0,
  },
  /**
   * @description the Time(milliseconds) before close
   */
  closeDelay: {
    type: Number,
    default: 0,
  },
  /**
   * @description value for `margin-top` of Dialog CSS, default is 15vh
   */
  top: {
    type: String,
    default: '15vh',
  },
  /**
   * @description visibility of Dialog
   */
  /**
   */
  modalClass: String,
  /**
   * @description same as z-index in native CSS, z-order of dialog
   */
  zIndex: {
    type: Number,
  },
  trapFocus: {
    type: Boolean,
    default: false,
  },
  /**
   * @description header's aria-level attribute
   */
  headerAriaLevel: {
    type: String,
    default: '2',
  },
} as const)

export type VWindowProps = ExtractPropTypes<typeof windowProps>

export const UPDATE_MODEL_EVENT = 'update:modelValue'
export const CHANGE_EVENT = 'change'
export const INPUT_EVENT = 'input'

export const dialogEmits = {
  open: () => true,
  opened: () => true,
  close: () => true,
  closed: () => true,
  [UPDATE_MODEL_EVENT]: (value: boolean) => isBoolean(value),
  openAutoFocus: () => true,
  closeAutoFocus: () => true,
  confirm: () => true,
  cancel: () => true,
}
export type DialogEmits = typeof dialogEmits
